import { Card } from 'antd';
import { useEffect } from 'react';
import { useState } from 'react';

const App = (props) => {
  const { contentList = {}, selectList = [] } = props;
  const [activeTabKey1, setActiveTabKey1] = useState(null);
  const onTab1Change = (key) => {
    setActiveTabKey1(key);
  };
  useEffect(() => {
    if (activeTabKey1 === null && selectList.length > 0) {
      setActiveTabKey1(selectList[0]['key']);
    }
  }, [selectList]);
  return (
    <Card
      style={{
        width: '100%',
      }}
      tabList={selectList}
      activeTabKey={activeTabKey1}
      onTabChange={onTab1Change}
    >
      {contentList[activeTabKey1]}
    </Card>
  );
};
export default App;
